<template>
    <div class="box">
        <div class="main">
            <!-- 中部左侧 -->
            <div class="main-left">
                <div class="left-top">
                    <div class="head">
                        <img src="../../assets/imgs/椭圆形备份 2(3).png" alt="">
                        <span>工作工作</span>
                    </div>
                </div>
                <div class="left-bottom">
                    <ul>
                        <li><span>我的资料</span></li>
                        <li @click="changeConfig(2)"><span :class="{ active: configTab == 2 }">我的收藏</span></li>
                        <li @click="changeConfig(3)"><span :class="{ active: configTab == 3 }">历史记录</span></li>
                        <li><span>实验得分榜</span></li>
                    </ul>
                </div>
            </div>
            <!-- 中部右侧 -->
            <div class="main-right">

                <!-- 我的收藏 -->
                <div class="TabA" v-show="configTab == 2">
                    <div class="right-top">
                        <div class="top1"><span :class="{ active1: tabIndex === 1 }">收藏夹</span></div>
                        <div class="top2">
                            <div class="top2-box">
                                筛选 :
                                <span>全部收藏<input type="checkbox"></span>
                                <span>最近使用<input type="checkbox"></span>
                                <span>难度选择
                                    <!-- 难度 -->
                                    <el-dropdown @command="handleDifficulty">
                                        <span class="el-dropdown-link">
                                            {{ difficulty }}
                                            <el-icon class="el-icon--right">
                                                <arrow-down />
                                            </el-icon>
                                        </span>
                                        <template #dropdown>
                                            <el-dropdown-menu>
                                                <el-dropdown-item command="默认">默认</el-dropdown-item>
                                                <el-dropdown-item command="初级">初级</el-dropdown-item>
                                                <el-dropdown-item command="中级">中级</el-dropdown-item>
                                                <el-dropdown-item command="高级">高级</el-dropdown-item>
                                            </el-dropdown-menu>
                                        </template>
                                    </el-dropdown>
                                </span>


                            </div>
                        </div>
                    </div>
                    <div class="right-bottom">
                        <ContentList :data="state.list1" />
                    </div>
                </div>

                <!-- 历史记录 -->
                <div class="TabB" v-show="configTab == 3">
                    <div class="right-top">
                        <div class="top1">
                            <span :class="{ active1: tabIndex === 1 }" @click="changeTab(1)">访问过</span>
                            <span :class="{ active1: tabIndex === 2 }" @click="changeTab(2)">实验成功的</span>

                        </div>
                    </div>
                    <div class="right-bottom1" v-if="tabIndex == 1">
                        <ContentList :data="state.list" />
                    </div>
                    <div class="right-bottom2" v-else>
                    </div>
                </div>

            </div>
        </div>
    </div>
</template>

<script setup lang=ts>

import { ref, reactive, onMounted } from "vue";
import { ArrowDown, ArrowUp } from '@element-plus/icons-vue';
import ContentList from '../../component/ContentList.vue';
import { getHistoryApi,getCollectApi } from '../../api/person.js';

// 进入左侧初始页面
const configTab = ref(2);
// 右侧切换页面
const tabIndex = ref(1);

// 
const difficulty = ref("默认")

// 
function changeConfig(n: number) {
    configTab.value = n;
}
// 
function changeTab(n: number) {
    tabIndex.value = n;
}

// 难度
const handleDifficulty = (command: string) => {
    console.log("难度", command);
    difficulty.value = command
}


const state = reactive({
    list: [],
    list1:[],
    // 总的页数
    // totalCount: 0,
    loading: false,
})
//分页参数
// const params = {
//         pageNumber: 1,
//         pageSize: 10
// }
// 
onMounted(() => {
    // 发送接口，初始化数据
    getData();
})

function getData(): void {
    state.loading = true;

    // 查询收藏
    getCollectApi({ "page": 1, "size": 5 })
        .then(res => {
            state.loading = false;
            console.log("res", res.data.data.data);
            state.list1 = res.data.data.data;
            // state.totalCount = res.totalCount;

        })
        .catch(() => {
            state.loading = false;
        })

    // 查询历史
    getHistoryApi({ "page": 1, "size": 10 })

        .then(res => {
            state.loading = false;
            console.log("res", res.data.data.data);
            state.list = res.data.data.data;
            // state.totalCount = res.totalCount;

        })
        .catch(() => {
            state.loading = false;
        })
}




</script>

<style scoped lang=scss>
.example-showcase .el-dropdown-link {
    cursor: pointer;
    color: var(--el-color-primary);
    display: flex;
    align-items: center;
    border: none;

}

.el-dropdown-link:focus {
    outline: none;
}

.el-dropdown {
    margin-left: 0.1rem;
    margin-top: 0.17rem;
}

.box {
    background-color: #F2F2F2;
    box-sizing: border-box;
    overflow: hidden;
    margin: 0 auto;

    .main {
        width: 24rem;
        height: 100%;
        // height: 10rem;
        // background-color: pink;
        display: flex;
        // justify-content: space-between;
        margin: 0.4rem auto;




        .main-left {
            width: 6.5rem;
            // width: 100%;
            height: 100%;
            // height: 10rem;
            // background-color: paleturquoise;
            margin-right: 0.4rem;

            .left-top {
                width: 100%;
                height: 6rem;
                background-color: white;
                display: flex;
                justify-content: center;
                align-items: center;
                margin-bottom: 0.38rem;
                border-radius: 0.08rem;

                .head {
                    width: 1.6rem;
                    // height: 1.88rem;
                    // background-color: brown;

                    img {
                        width: 1.6rem;
                        height: 1.6rem;
                        background-color: aliceblue;
                        margin-bottom: 0.2rem;
                    }

                    span {
                        width: 100%;
                        height: 0.28rem;
                        margin-left: 0.3rem;
                        // font-size: 0.3rem;
                    }

                }
            }

            .left-bottom {
                width: 100%;
                // height: 3.2rem;
                background-color: white;
                border-radius: 0.08rem;

                ul {
                    display: grid;
                    grid-template-rows: repeat(4, 1fr);
                    gap: 0.06rem;
                    // margin-left: 0.3rem;

                    li {
                        width: 100%;
                        height: 0.85rem;
                        line-height: 0.85rem;

                        span {
                            font-size: 0.25rem;
                            font-weight: 550;
                            padding-left: 0.2rem;
                            box-sizing: border-box;

                            &.active {
                                width: 100%;
                                height: 0.25rem;
                                color: #139DFF;
                                border-left: 3px solid #139DFF;
                            }

                        }
                    }


                }

            }
        }

        .main-right {
            // width: 11.13rem;
            width: 100%;
            height: 100%;

            .TabA {


                .right-top {
                    width: 100%;
                    // height: 1.5rem;
                    background-color: white;
                    // display: grid;
                    // grid-template-rows: repeat(2, 1fr);
                    // gap: 0.06rem;
                    // display: flex;
                    // flex-direction: row;
                    // justify-content: space-between;
                    margin-bottom: 0.3rem;
                    border-radius: 0.08rem;

                    .top1 {
                        width: 100%;
                        height: 0.75rem;
                        border-bottom: 1px solid #F2F2F2;

                        span {
                            font-size: 0.3rem;
                            font-weight: 600;
                            line-height: 0.75rem;
                            margin: 0 0.38rem 0 0.38rem;
                            padding-bottom: 0.15rem;
                            box-sizing: border-box;

                            &.active1 {
                                width: 0.15rem;
                                height: 0.15rem;
                                border-bottom: 3px solid #090E1A;
                            }

                        }


                    }

                    .top2 {
                        width: 100%;
                        height: 0.75rem;

                        .top2-box {
                            color: #999999;
                            line-height: 0.65rem;
                            margin-left: 0.38rem;

                            span {
                                color: black;
                                margin-right: 0.25rem;

                                input {
                                    width: 0.35rem;
                                    height: 0.22rem;
                                }
                            }
                        }
                    }
                }

                .right-bottom {
                    width: 100%;
                    // height: 8.5rem;
                    //background-color: paleturquoise;
                }
            }

            .TabB {


                .right-top {
                    width: 100%;
                    // height: 1.5rem;
                    background-color: white;
                    // display: grid;
                    // grid-template-rows: repeat(2, 1fr);
                    // gap: 0.06rem;
                    // display: flex;
                    // flex-direction: row;
                    // justify-content: space-between;
                    margin-bottom: 0.3rem;
                    border-radius: 0.08rem;

                    .top1 {
                        width: 100%;
                        height: 0.75rem;
                        border-bottom: 1px solid #F2F2F2;

                        span {
                            font-size: 0.3rem;
                            font-weight: 600;
                            line-height: 0.75rem;
                            margin: 0 0.38rem 0 0.38rem;
                            padding-bottom: 0.15rem;
                            box-sizing: border-box;

                            &.active1 {
                                width: 0.15rem;
                                height: 0.15rem;
                                border-bottom: 3px solid #090E1A;
                            }

                        }



                    }

                    .top2 {
                        width: 100%;
                        height: 0.75rem;

                        .top2-box {
                            color: #999999;
                            line-height: 0.65rem;
                            margin-left: 0.38rem;

                            span {
                                color: black;
                                margin-right: 0.25rem;

                                input {
                                    width: 0.35rem;
                                    height: 0.22rem;
                                }
                            }
                        }
                    }
                }

                .right-bottom1 {
                    width: 100%;
                    // height: 8.5rem;
                    // background-color: pink;
                }

                .right-bottom2 {
                    width: 100%;
                    height: 8.5rem;
                    background-color: palegreen;
                }
            }


        }

    }

}
</style>